<template>
   <div class="">
       <div class="materialListContainer" >
           <div v-for="(item, index) in goods" class="material-items">
               <div class="material-item"  @click="seeContent(index)">
                    <p class="material-item-id">{{item.id}}</p>
                    <p class="material-item-title">{{item.title}}</p>
                    <img class="material-item-arrow" src="@/assets/image/index/arrow_down.png" alt="">
               </div>
                <transition name="fade">              
                    <div class="material-item-content" v-show="item.ifShowContent">
                            <ul class="content-list">
                                <li v-for="item in item.content">{{item}}</li>
                            </ul>
                    </div>
                 </transition>
           </div>
           
       </div>
   </div>
</template>

<script>
export default {
   name: '',
   data() {
       return {
           goods:[
               {
                   id:'01',
                   title:'原材料货物',
                   content:['原材料爆款好物','原材料采购需求并链','供应链优化'],
                   ifShowContent:false
               },
                {
                   id:'02',
                   title:'原材料货物',
                   content:['原材料爆款好物','原材料采购需求并链','供应链优化'],
                   ifShowContent:false
               },
                {
                   id:'03',
                   title:'原材料货物',
                   content:['原材料爆款好物','原材料采购需求并链','供应链优化'],
                   ifShowContent:false
               },
               {
                   id:'04',
                   title:'原材料货物',
                   content:['原材料爆款好物','原材料采购需求并链','供应链优化'],
                   ifShowContent:false
               },
               {
                   id:'05',
                   title:'原材料货物',
                   content:['原材料爆款好物','原材料采购需求并链','供应链优化'],
                   ifShowContent:false
               },
               {
                   id:'06',
                   title:'原材料货物',
                   content:['原材料爆款好物','原材料采购需求并链','供应链优化'],
                   ifShowContent:false
               }
           ],
           
       }
   },
  components: {},
  methods:{
      seeContent(index){
          console.log(index);
          this.goods[index].ifShowContent = ! this.goods[index].ifShowContent
          console.log(this.goods[index].ifShowContent);
          
      }
  }
}
</script>

<style scoped lang="less">
.materialListContainer{
    width: 7.25rem;
}
.material-items{
    margin-bottom: 0.2rem;
}
.material-item{
    position: relative;
    width: 7.25rem;
    height: 0.8rem;
    background: #283E77;
    border-radius: 2px;
    .material-item-id{
        position: absolute;
        left: 0.2rem;
        top: 50%;
        transform: translateY(-50%);
        color: #A4ABBE;
        font-size: 0.12rem;
    }
    .material-item-title{
        position: absolute;
        left: 0.95rem;
         top: 50%;
        transform: translateY(-50%);
        font-size: 0.12rem;
        color: #D1A721;
    }
    .material-item-arrow{
        position: absolute;
        right:0.3rem;
        top: 0.4rem;
        width: 0.4rem;
        height: 0.2rem;
    }
    
}
.material-item-content{
    width: 7.25rem;
    border-top: 0.01rem solid #000329;
    font-size: 0.11rem;
    color: #F8FEF4;
    background-color: #283E77;
    overflow: hidden;
}
.content-list{
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    margin-left: 0.8rem;  
    
}
.content-list{
    li {
        margin-bottom: 0.25rem;
        list-style-type: squre;
    }
    li::before {
  content: '\25AA'; color:#D1A721;
  display: inline-block; width: 1em;
  margin-right: 0.12rem;
}
}
.fade-enter-active{                 //指就是html中fade名称  0.5s动画过渡的时间
  transition: opacity .8s;                             
}

.fade-enter, .fade-leave-to {           
  opacity: 0.3;
}


</style>
